<template>
  <div class="course-management">
    <!-- 白色框架 -->
    <div class="content-wrapper">
      <div class="header">
        <!-- 左侧标题 -->
        <h1 class="page-title">成员管理</h1>
        <!-- 右侧按钮 -->
        <div class="header-buttons">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="openDialog('teacher')"
          >
            添加老师
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-user"
            @click="openDialog('assistant')"
          >
            添加助教
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-document"
            @click="openDialog('student')"
          >
            添加学生
          </el-button>
        </div>
      </div>

      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        style="margin-top: 20px;"
        v-loading="isLoading"
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="role" label="角色" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              @click="removeUser(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Dialog -->
      <el-dialog
        v-model="isDialogVisible"
        :title="'添加' + (dialogType === 'teacher' ? '老师' : dialogType === 'assistant' ? '助教' : '学生')"
        width="600px"
        center
      >
        <!-- 添加学生弹窗 -->
        <template v-if="dialogType === 'student'">
          <el-radio-group v-model="addMode" style="margin-bottom: 20px;">
            <el-radio label="manual">手动添加</el-radio>
            <el-radio label="batch">批量导入</el-radio>
          </el-radio-group>

          <!-- 手动添加 -->
          <div v-if="addMode === 'manual'">
            <el-form label-width="100px">
              <el-form-item label="搜索类型">
                <el-select v-model="searchType" placeholder="选择搜索类型">
                  <el-option label="姓名" value="name" />
                  <el-option label="电话号码" value="phone" />
                  <el-option label="账号" value="account" />
                </el-select>
              </el-form-item>
              <el-form-item label="搜索内容">
                <el-input
                  v-model="searchQuery"
                  placeholder="请输入搜索内容"
                  @input="debounceSearchUser"
                />
              </el-form-item>
            </el-form>
            <el-divider />
            <el-table
              :data="searchResults"
              v-if="searchResults.length > 0"
              border
              style="margin-top: 20px"
            >
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="phone" label="电话号码" />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="addUser(row)">
                    添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="no-result" v-if="!isLoading">
              未找到符合条件的用户
            </div>
          </div>

          <!-- 批量导入 -->
          <div v-else-if="addMode === 'batch'" style="margin-top: 20px;">
            <el-button type="primary" style="margin-bottom: 10px;" @click="downloadTemplate">
              下载导入模板
            </el-button>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleFileUpload"
            >
              <el-button type="primary">点击上传文件</el-button>
            </el-upload>
          </div>
        </template>

        <!-- 添加老师或助教弹窗 -->
        <template v-else>
          <el-form label-width="100px">
            <el-form-item label="搜索类型">
              <el-select v-model="searchType" placeholder="选择搜索类型">
                <el-option label="姓名" value="name" />
                <el-option label="电话号码" value="phone" />
                <el-option label="账号" value="account" />
              </el-select>
            </el-form-item>
            <el-form-item label="搜索内容">
              <el-input
                v-model="searchQuery"
                placeholder="请输入搜索内容"
                @input="debounceSearchUser"
              />
            </el-form-item>
          </el-form>
        </template>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button
            type="primary"
            @click="dialogType === 'student' && addMode === 'manual' ? confirmAddStudent() : null"
          >
            确认
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDialogVisible: false,
      dialogType: '', // teacher, assistant, student
      addMode: 'manual', // 手动 or 批量导入
      searchQuery: '',
      searchType: 'name',
      searchResults: [],
      tableData: [
        { name: '张三', role: '老师', phone: '12345678901' },
        { name: '李四', role: '助教', phone: '98765432101' },
      ],
      isLoading: false,
      debounceTimer: null,
    };
  },
  methods: {
    openDialog(type) {
      this.dialogType = type;
      this.isDialogVisible = true;
    },
    closeDialog() {
      this.isDialogVisible = false;
      this.searchQuery = '';
      this.searchResults = [];
      this.isLoading = false;
    },
    debounceSearchUser() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.searchUser();
      }, 500);
    },
    async searchUser() {
      if (!this.searchQuery.trim()) {
        this.$message.error('请输入搜索内容');
        return;
      }
      this.isLoading = true;
      setTimeout(() => {
        this.searchResults = [
          { id: 1, name: '张三', phone: '12345678901' },
          { id: 2, name: '李四', phone: '98765432101' },
        ];
        this.isLoading = false;
      }, 1000);
    },
    addUser(user) {
      this.tableData.push(user);
      this.$message.success(`${user.name} 已添加`);
    },
    removeUser(row) {
      this.tableData = this.tableData.filter((item) => item !== row);
      this.$message.success(`${row.name} 已被删除`);
    },
    confirmAddStudent() {
      this.$message.success('学生已确认添加');
      this.closeDialog();
    },
    downloadTemplate() {
      this.$message.info('下载模板功能正在实现');
    },
    handleFileUpload(file) {
      console.log('上传的文件：', file);
    },
  },
};
</script>

<style scoped>
.course-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.content-wrapper {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.header-buttons el-button {
  margin-left: 10px;
}
</style>
